<template>
	<div class="tabbar">
		<ul>
			<li  v-for="(item,index) in routerList" :key="index" @click="switchTab(item.path)">
				<img :src="$route.path === item.path ? item.selected : item.active" alt="">
				<span :class='$route.path === item.path ? "active" : ""'>{{item.title}}</span>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: "Tabbar",
		data() {
			return {
				routerList: [
					{
						title: '首页',
						path: '/home',
						active: '/images/home.png',
						selected: '/images/home-select.png'
					},
					{
						title: '分类',
						path: '/list',
						active: '/images/list.png',
						selected: '/images/list-select.png'
					},
					{
						title: '购物车',
						path: '/cart',
						active: '/images/cart.png',
						selected: '/images/cart-select.png'
					},
					{
						title: '我的',
						path: '/my',
						active: '/images/my.png',
						selected: '/images/my-select.png'
					}
				]
			}
		},
		methods:{
			switchTab(path){
				if(this.$route.path == path){return}
				// console.log(this.$route.path);
				// console.log(path);
				
				this.$router.push(path)
			}
		}
	}
</script>

<style scoped>
	.tabbar {
		width: 100%;
		height: 60px;
		font-size: 15px;
		/* z-index: 999; */
		background-color: #fff;

		/* margin-top: 606px; */
	}

	ul {
		height: 100%;
		list-style: none;
		/* width: 100%; */
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	ul>li {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	img {
		height: 31px;
		width: 31px;
	}
	.active{
		color: red;
	}
</style>
